<template>
    <div>
        <swiper ref="swiper" class="swiImgs" :options="swiperOption">
            <swiper-slide>
                <div class="about_wrap">
                    <span class="slide_arrow"></span>
                    <div class="about_head">
                        <img class="bgImg" src="@/assets/images/about_head.jpg" alt/>
                        <a
                                href="javascript:void(0);"
                                @click="viewActivityIntro"
                                class="tag_type aboutActivity blink"
                        >关于活动</a>
                    </div>
                    <div class="about_content">
                        <p>有这样一群生力军</p>
                        <p>他们远离家乡，他们坚韧朴实，他们朝气蓬勃</p>
                        <p>日新月异的城市每一处都有他们劳动的汗水</p>
                        <p>背包装满希望，心里常怀惦念</p>
                        <p>家，是他们心中最温暖的地方</p>
                        <p>春节回家，是他们一年中最期盼的旅途</p>
                        <p>让我们一起为农民工兄弟姐妹助力回家路</p>
                        <p>请加入我们的行列</p>
                        <p>把这份暖暖的爱传递下去</p>
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide>
                <Intro/>
            </swiper-slide>
        </swiper>
        <AboutIntro ref="aboutIntro"/>
        <div class="scrollIntoView" ref="scrollintoview"></div>
    </div>
</template>
<script>
  import AboutIntro from "@/components/AboutIntro";
  import Intro from "@/components/Intro";
  import {swiper, swiperSlide} from "vue-awesome-swiper";

  export default {
    data() {
      return {
        swiperOption: {
          direction: "vertical"
        }
      };
    },
    methods: {
      viewActivityIntro() {
        this.$refs.aboutIntro.show();
      }
    },
    computed: {
      swiper() {
        return this.$refs.swiper.swiper;
      }
    },
    mounted() {
      this.$nextTick(() => {
        let mySwiper = this.swiper;
        let startScroll, touchStart, touchCurrent;
        let startX, startY, moveEndX, moveEndY, X, Y;
        mySwiper.slides.on(
          "touchstart",
          function (e) {
            startScroll = this.scrollTop;
            touchStart = e.targetTouches[0].pageY;

            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
          },
          true
        );
        mySwiper.slides.on(
          "touchmove",
          function (e) {
            let isDist = true;
            moveEndX = e.targetTouches[0].pageX;
            moveEndY = e.targetTouches[0].pageY;
            (X = moveEndX - startX), (Y = moveEndY - startY);

            if (Math.abs(X) > Math.abs(Y) && X > 0) {
              isDist = false;
            } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
              isDist = false;
            } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
              isDist = true;
            } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
              isDist = true;
            } else {
              isDist = true;
            }

            touchCurrent = e.targetTouches[0].pageY;
            var touchesDiff = touchCurrent - touchStart;
            var slide = this;
            var onlyScrolling =
              slide.scrollHeight > slide.offsetHeight &&
              ((touchesDiff < 0 && startScroll === 0) ||
                (touchesDiff > 0 &&
                  startScroll === slide.scrollHeight - slide.offsetHeight) ||
                (startScroll > 0 &&
                  startScroll < slide.scrollHeight - slide.offsetHeight));
            if (onlyScrolling) {
              if (isDist) {
                e.stopPropagation();
              }
            }
          },
          true
        );
        if (this.$route.query.back) {
          mySwiper.slideTo(1, 0)
        }
      });
    },
    components: {
      swiper,
      swiperSlide,
      Intro,
      AboutIntro
    }
  };
</script>
<style scoped>
    .scrollIntoView {
        height: 1px;
    }

    .about_wrap {
        position: relative;
    }

    .slide_arrow {
        width: 1rem;
        height: .63rem;
        display: inline-block;
        background-image: url('~@/assets/images/arrow_down99x63.png');
        background-repeat: no-repeat;
        background-size: 1rem .63rem;
        position: absolute;
        left: 50%;
        margin-left: -.5rem;
        bottom: 20px;
        animation: arrowAnimate 1s linear infinite;
    }

    @keyframes arrowAnimate {
        0% {
            bottom: 40px;
            opacity: 0;
        }
        100% {
            bottom: 20px;
            opacity: 1;
        }
    }

    @-webkit-keyframes arrowAnimate {
        0% {
            bottom: 40px;
            opacity: 0;
        }
        100% {
            bottom: 20px;
            opacity: 1;
        }
    }


    .about_head {
        width: 7.5rem;
        height: 5.37rem;
        position: relative;
    }

    .about_head img.bgImg {
        width: 100%;
        height: 100%;
    }

    .about_head .aboutActivity {
        position: absolute;
        left: 0.27rem;
        top: 0.29rem;
    }

    .about_content {
        background-color: #fff;
        padding-top: 0.57rem;
        padding-bottom: 1.58rem;
        background: url(~@/assets/images/cloud04.png) no-repeat right bottom/6.02rem 2.95rem;
    }

    .about_content p {
        font-size: 0.22rem;
        line-height: 0.64rem;
        color: #d01f22;
        text-align: center;
        font-weight: bold;
    }

    .swiper-container {
        width: 100%;
        height: 100vh;
    }

    .swiper-slide {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 添加兼容性前缀 */
    @-webkit-keyframes blink {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
    }

    @-moz-keyframes blink {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.1);
        }
    }

    @-ms-keyframes blink {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.1);
        }
    }

    @-o-keyframes blink {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.1);
        }
    }

    /* 定义blink类*/
    .blink {
        color: #fff;
        animation: blink 1s linear infinite;
        /* 其它浏览器兼容性前缀 */
        -webkit-animation: blink 1s linear infinite;
        -moz-animation: blink 1s linear infinite;
        -ms-animation: blink 1s linear infinite;
        -o-animation: blink 1s linear infinite;
    }

    .tag_type {
        width: 2.1rem;
        height: 1rem;
        background-size: 1.89rem .73rem;
    }
</style>
